import GanttContext from "../context";
import { useContext } from "react";
import { ChevronLeft, ChevronRight } from "./icons";
import { cn } from "../helpers/utils";
import { GanttConsts } from "../constants";

interface SplitProps {
  style: React.CSSProperties;
}

const SplitButton = ({ hideTaskTable }: { hideTaskTable: boolean }) => {
  const Icon = hideTaskTable ? ChevronRight : ChevronLeft;
  return <Icon className="text-white" size={16} />;
};

export default function Split({ style }: SplitProps) {
  const { hideTaskTable, setHideTaskTable } = useContext(GanttContext);
  return (
    <div style={style} className="flex justify-center items-center">
      <div
        className="h-full bg-gray-50 hover:bg-gray-100 hover:cursor-col-resize"
        style={{ width: `${GanttConsts.SPLIT_WIDTH}px` }}
      />
      <div
        className={cn(
          "h-12 w-4 bg-orange-500/50 hover:bg-orange-500 absolute z-20 rounded-r-md flex items-center hover:cursor-pointer",
          hideTaskTable ? "ml-4" : "ml-5"
        )}
        onClick={() => {
          setHideTaskTable(!hideTaskTable);
        }}
      >
        <SplitButton hideTaskTable={hideTaskTable} />
      </div>
    </div>
  );
}
